<template>
	<view class="container">
		<view class="form">
			<uni-forms :modelValue="addressData">
				<uni-forms-item name="name">
					<view class="item">
						<text>联系人</text>
						<view class="input">
							<input type="text" placeholder="填写姓名" v-model="addressData.name" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="phone">
					<view class="item">
						<text>手机号</text>
						<view class="input">
							<input type="number" placeholder="填写手机号" v-model="addressData.phone" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="location">
					<view class="item">
						<text>服务地址</text>
						<view class="input">
							<input type="text" placeholder="填写服务地点" v-model="addressData.location" />
						</view>
						<image @click="chooseLocation()" style="width: 40rpx;height: 40rpx;position: absolute;top: 50%;right: -20rpx;transform: translateY(-50%);" src="../../static/address/location.png"></image>
					</view>
				</uni-forms-item>
				<uni-forms-item name="detail">
					<view class="item">
						<text>详细地址</text>
						<view class="input">
							<input type="text" placeholder="填写具体门牌号" v-model="addressData.detail" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="wx">
					<view class="item" style="border: none;">
						<text>微信号</text>
						<view class="input">
							<input type="text" placeholder="填写微信号" v-model="addressData.wx" />
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottom">
			<view @click="addAddress()" class="button">完成</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import http from "@/utils/request.js"

	let addressData=reactive({
		name:'',
		phone:'',
		location:'',
		detail:'',
		wx:''
	})
	
	function addAddress(){
		let response=http.post('/address/addaddress',{
			name:addressData.name,
			phone:addressData.phone,
			location:addressData.location,
			detail:addressData.detail,
			wx:addressData.wx,
			address_order:uni.getStorageSync('userinfo').user_id
		})
		response.then(res=>{
			if(res.data.code===200){
				let addresslist=uni.getStorageSync('addresslist')
				if(!addresslist)addresslist=[]
				const address={
					name:addressData.name,
					phone:addressData.phone,
					location:addressData.location,
					detail:addressData.detail,
					wx:addressData.wx,
					address_order:uni.getStorageSync('userinfo').user_id,
					isdefault:0,
					address_id:res.data.data
				}
				addresslist.push(address)
				uni.setStorageSync('addresslist',addresslist)
				uni.showToast({
					title:'添加成功',
					duration:500
				})
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}
		})
	}
	function chooseLocation(){
		uni.authorize({
			scope: 'scope.userLocation',
			success(){
				uni.chooseLocation({
					success(res){
						addressData.location=res.address
					}
				})
			},
			fail(err){
				console.log(err)
				let errMsgTit = '';
				if (err.errMsg === 'authorize:fail:auth deny') {
					errMsgTit = '您已拒绝授权，是否跳转至设置页面开启权限';
				}
				uni.showModal({
					title: '权限提示',
					content: `${errMsgTit}`,
					success(res) {
						if (res.confirm) {
							uni.getSetting({
								success(res) {
									console.log(res.authSetting);
									if (!res.authSetting['scope.userLocation']) {
										uni.openSetting({});
									}
								}
							});
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		})
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.form{
			box-sizing: border-box;
			margin-top: 30rpx;
			width: 90%;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding:20rpx 40rpx 0 40rpx;
			
			.item{
				display: flex;
				align-items: center;
				position: relative;
				border-bottom: 2rpx solid #e6e6e6;
				margin: -5rpx;
				
				text{
					font-size: 28rpx;
					margin-right: 10rpx;
					letter-spacing: 0.1em;
					color: #989898;
				}
				
				.input{
					height: 100rpx;
					flex-grow: 1;
					display: flex;
					box-sizing: border-box;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					align-items: center;
					
					input{
						width: 100%;
						height: 90%;
					}
				}
			}
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 90%;
				height: 70%;
				border-radius: 50rpx;
			}
		}
	}
</style>
